<!-- 表单属性组件 -->
<template>
  <div class="form-config-container">
    <el-form label-position="left">
      <!--                  <el-form-item label="标签对齐方式"  class="custom_input">-->
      <!--                    <el-radio-group v-model="data.labelPosition">-->
      <!--                      <el-radio-button label="left">左对齐</el-radio-button>-->
      <!--                      <el-radio-button label="right">右对齐</el-radio-button>-->
      <!--                      <el-radio-button label="top">顶部对齐</el-radio-button>-->
      <!--                    </el-radio-group>-->
      <!--                  </el-form-item>-->

      <el-form-item label="宽度">
        <el-input v-model="data.labelWidth" class="custom_input" />
      </el-form-item>

      <!--      <el-form-item label="组件尺寸">-->
      <!--        <el-radio-group v-model="data.size">-->
      <!--          <el-radio-button label="medium">medium</el-radio-button>-->
      <!--          <el-radio-button label="small">small</el-radio-button>-->
      <!--          <el-radio-button label="mini">mini</el-radio-button>-->
      <!--        </el-radio-group>-->
      <!--      </el-form-item>-->

      <el-form-item label="表单名称">
        <el-input v-model="data.formName" class="custom_input" />

      </el-form-item>
      <el-form-item label="表单序列号">
        <el-input v-model="data.formNumber" class="custom_input" :disabled="true" />
      </el-form-item>

      <el-form-item label="自定义样式">
        <el-input
          v-model="data.customStyle"
          class="custom_input"
          type="textarea"
          :rows="2"
        />
      </el-form-item>
      <el-form-item label="自定义Class">
        <el-input v-model="data.customClass" class="custom_input" clearable />
      </el-form-item>
      <el-form-item label="JS增强">
        <el-tooltip class="item" effect="dark" placement="top-start">
          <div slot="content">在JS增强输入框里除了可以用挂载到window中的全局变量之外，
            <br>还可以用我们给你封装好的几个变量以及方法，
            <br> 他们分别如下
            <br>  vm Vue实例，可以调用Vue的一系列的方法，例如 vm.$nextTick();
            <br>api 封装了一下api，具体如下
            <br> api.getFormData(key)
            <br>setFormData(key, value) 设置form表单的值 show(key) 显示一个或多个组件
            <br>hide(key) 隐藏一个或多个组件 api.validate()校验表单
            <br>api.resetFields() 重置表单
          </div>

          <el-input v-model="data.jsExpand" class="custom_input" type="textarea" :rows="6" clearable />
        </el-tooltip>

      </el-form-item>

      <el-form-item label="外部js资源">
        <el-input
          v-model="data.customJs"
          class="custom_input"
          type="textarea"
          :rows="6"
        />
      </el-form-item>

      <el-form-item label="是否查看">
        <el-checkbox v-model="data.disable" @change="changeDisable" />
      </el-form-item>
      <el-form-item label="显示批注">
        <el-checkbox v-model="data.showAnnotation" @change="changeShowAnnotation" />
      </el-form-item>

      <el-form-item label="布局" label-width="50px">
        <el-col :span="30">
          <el-radio-group v-model="radio1" @change="layOutChange($event)">
            <el-radio-button label="24">单列</el-radio-button>
            <el-radio-button label="12">两列</el-radio-button>
            <el-radio-button label="8">三列</el-radio-button>
            <el-radio-button label="6">四列</el-radio-button>
          </el-radio-group>
        </el-col>
      </el-form-item>

    </el-form>
  </div>
</template>

<script>
import MakingForm from './Container.vue'

export default { // 父组件传递的data
  components: {
    // eslint-disable-next-line vue/no-unused-components
    MakingForm
  },
  props: ['data', 'form'],

  data() {
    return {
      radio1: 12
    }
  },
  watch: {
    data() {
      this.$nextTick(_ => {
      })
    },
    disable(val, oldVal) {
    }
  },
  mounted() {

  },
  methods: {
    getA() {
    },
    changeDisable(disabled) {
      this.changeDisableFun(disabled)
    },
    changeShowAnnotation(disabled) {
      this.changeShowAnnotationFun(disabled)
    },
    changeDisableFun: function(val) {
      var list = this.form.list
      this.changeDisableAction(list, val)
    },
    changeShowAnnotationFun: function(val) {
      var list = this.form.list
      this.changeShowAnnotationAction(list, val)
    },
    changeShowAnnotationAction: function(list, val) {
      list.forEach(item => {
        if (item.options) {
          item.options.showAnnotation = val
        } else {
          list = item
          this.changeDisableAction(list, val)
        }

        if (item.tabColumns) {
          list = item.tabColumns
          this.changeShowAnnotationAction(list, val)
        }
        if (item.tableColumns) {
          list = item.tableColumns
          this.changeShowAnnotationAction(list, val)
        }
      })
    },
    changeDisableAction: function(list, val) {
      list.forEach(item => {
        if (item.options) {
          item.options.disabled = val
        } else {
          list = item
          this.changeDisableAction(list, val)
        }

        if (item.tabColumns) {
          list = item.tabColumns
          this.changeDisableAction(list, val)
        }
        if (item.tableColumns) {
          list = item.tableColumns
          this.changeDisableAction(list, val)
        }
      })
    },
    layOutChange: function(val) {
      this.$emit('getjson', val)
    },
    childMethod() {

    }
  }
}
</script>
<style type="text/css">
    .custom_input {
        width: auto !important;
    }
</style>
